<template>
    <section id="k8s-daemonset">
        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>详情</div>
            <hr>
            <div style="margin-bottom: 5px">名称：{{DaemonsetDetail.daemonset.name}}</div>
            <div style="margin-bottom: 5px">命名空间：{{DaemonsetDetail.daemonset.namespace}}</div>

            <div style="margin-bottom: 5px">标签：<el-tag size="mini" v-for="(v,key) in DaemonsetDetail.daemonset.labels "> {{key}}: {{v}}</el-tag></div>
            <div style="margin-bottom: 5px">选择器：<el-tag size="mini" v-for="(v,key) in DaemonsetDetail.daemonset.selector "> {{key}}: {{v}}</el-tag></div>




            <div style="margin-bottom: 5px">创建时间：{{DaemonsetDetail.daemonset.createdate}}</div>
            <div style="margin-bottom: 5px">镜像：<el-tag size="mini" v-for="image in DaemonsetDetail.daemonset.images "> {{image}}</el-tag></div>
            <div style="margin-bottom: 5px">运行状态：{{DaemonsetDetail.daemonset.runStatus}}</div>


        </el-card>

        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>容器组</div>
            <hr>
            <el-table
                    :data="DaemonsetDetail.pods"
                    style="width: 100%"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <el-table-column

                        width="40">
                    <template slot-scope="scope">
                        <i :class="scope.row.status !== 'Running' ? 'fa fa-info-circle' : 'fa fa-check-circle'"
                           :style="scope.row.status !== 'Running' ? 'font-size:18px;color:red' : 'font-size:18px;color:green'"
                        >

                        </i>

                    </template>



                </el-table-column>
                <el-table-column
                        prop="name"
                        label="名称"
                        width="300">
                    <template slot-scope="scope">
                        <el-link :href="'#/kubernetes/pods/' + scope.row.name + '?namespace=' + $route.query.namespace"  type="primary" :underline="false" >{{scope.row.name}}</el-link>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="nodename"
                        label="节点"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="podip"
                        label="容器地址"
                        width="180">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="restartcount"
                        label="已重启">
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="创建时间">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="日志" placement="bottom-start">
                        <el-button
                                size="mini"
                                type="info"
                                plain
                                icon="el-icon-notebook-2"
                                @click="viewLogsForPod(scope.row.name,$route.query.namespace)"
                        ></el-button>
                        </el-tooltip>
                        <el-button
                                size="mini"
                                type="warning"
                                plain
                                icon="el-icon-edit"
                                @click="editResourceYaml(scope.row.name,$route.query.namespace,'pods')"
                        ></el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                plain
                                icon="el-icon-delete"
                                @click="deleteKubernetesResource(scope.row.name,$route.query.namespace,'pods')"
                        ></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>

        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>服务</div>
            <hr>
            <el-table
                    :data="DaemonsetDetail.services"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <el-table-column
                        prop="name"
                        label="名称"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="选择器"
                        width="200"
                >
                    <template slot-scope="scope">
                        <div v-for="svc in scope.row.selector">
                            <el-tag  type="info" size="mini">{{svc}}</el-tag>
                        </div>
                    </template>


                </el-table-column>
                <el-table-column
                        prop="demainname"
                        label="集群域名"
                        width="300">
                </el-table-column>
                <el-table-column
                        prop=""
                        label="访问端点"
                        fit
                >
                    <template slot-scope="scope">
                        <div v-for="ep in scope.row.endpoints">
                            <el-tag  type="info" size="mini">{{ep}}</el-tag>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="createdate"
                        label="创建日期">
                </el-table-column>

            </el-table>

        </el-card>



        <el-card style="margin-bottom: 20px" class="bg-card">
            <div>事件</div>
            <hr>
            <el-table
                    :data="DaemonsetDetail.events"
                    style="width: 100%;"
                    :row-style="rowStyle"
                    :header-row-style="headerStyle"
                    header-cell-class-name="bg-card"
            >
                <template slot="empty">
                    <p>暂无事件内容或已过期</p>

                </template>

                <el-table-column
                        prop="message"
                        label="消息"
                        width="600">
                </el-table-column>
                <el-table-column
                        prop="source"
                        label="来源">
                </el-table-column>
                <el-table-column
                        prop="childobject"
                        label="子对象"
                >
                </el-table-column>
                <el-table-column
                        prop="num"
                        label="总数"
                >
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="原因"
                >
                </el-table-column>
                <el-table-column
                        prop="lastoccurtime"
                        label="最近出现于"
                >
                </el-table-column>


            </el-table>

        </el-card>
        <el-dialog :title=yamlTitle :visible.sync="editK8sResourceYamlVisible" :close-on-click-modal="false">
            <vue-json-editor v-model="yamlMeta" :show-btns="false"  mode="tree" ></vue-json-editor>

            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="editK8sResourceYamlVisible=false">取 消</el-button>
                <el-button size="small" @click="updateResourcceFromYaml" >更 新</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import vueJsonEditor from 'vue-json-editor'
    import { k8sDaemonsetDetailData,k8sLogsData,K8sResourceYaml,UpdateResourceUseYaml,deleteK8sResource } from '../../api/api'
    export default {
        data() {
            return {
                DaemonsetDetail: {
                    daemonset:{},

                },
                yamlTitle:"",
                editResourceName:"",
                editResourceType:"",
                yamlMeta:{},
                editK8sResourceYamlVisible: false,
            }
        },
        methods: {

            getK8sDaemonsetDetailData(){
                let self = this
                let param = {name:this.$route.params.name,namespace:this.$route.query.namespace}
                k8sDaemonsetDetailData(param).then((res) => {
                    console.log(res)
                    self.DaemonsetDetail.daemonset = res.daemonset
                    self.DaemonsetDetail.pods = res.pods
                    self.DaemonsetDetail.events = res.events
                    self.DaemonsetDetail.services = res.services



                })

            },
            viewLogsForPod(podname,namespace){

                let logsUrl = this.$router.resolve({
                    path: "/kubernetes/logs/" + podname + "?namespace=" + namespace
                });
                window.open(logsUrl .href, '_blank');

                // let self = this
                // let param = {name:podname,namespace:namespace}
                // k8sLogsData(param).then((res) => {
                //     console.log(res.logs)
                //
                // })
            },
            editResourceYaml(name,namespace,type){
                let self = this
                let param = {name:name,namespace:namespace,type:type}
                K8sResourceYaml(param).then((res) => {
                    // console.log(res.metadata)
                    console.log(JSON.parse(res.metadata))
                    self.yamlMeta = JSON.parse(res.metadata)
                })
                // console.log(self.yamlMeta)
                self.yamlTitle = "修改" + type + ": " + name
                self.editResourceName = name
                self.editResourceType = type
                self.editK8sResourceYamlVisible = true


            },
            updateResourcceFromYaml(){
                let self = this
                // console.log(self.yamlMeta)

                let param = {name:self.editResourceName,namespace:self.$route.query.namespace,type:self.editResourceType,podYaml:self.yamlMeta}
                // console.log(param)
                UpdateResourceUseYaml(param).then((res) => {
                    if (res.code === 400) {
                        // alert(res.message)
                        self.$alert(res.message, '更新错误', {
                            confirmButtonText: '确定',
                        });
                    }
                })
                self.editK8sResourceYamlVisible = false

            },
            deleteKubernetesResource(name,namespace,type){

                let self = this
                let param = {name:name,namespace:namespace,type:type}
                // deleteK8sPod(param).then((res) => {
                // })
                // self.getK8sReplicaSetDetailData()

                this.$confirm('确定删除?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    deleteK8sResource(param).then((res) => {
                        if (res.code === 200) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });

                        }else if (res.code === 400) {
                            self.$alert(res.message, '删除失败', {
                                confirmButtonText: '确定',
                            });
                        }
                    })


                }).catch(() => {

                });

                // self.getK8sReplicaSetDetailData()
                // this.reload()

            },

            rowStyle({ row, rowIndex}){
                return "height:40px;background-color: #FAFAFA;"
            },
            headerStyle({ row, rowIndex}){
                return "height:20px;color:#0099FF;background-color: #FAFAFA;"
            },

        },
        mounted: function () {
            console.log(this.$route.params.name)
            console.log(this.$route.query.namespace)
            this.getK8sDaemonsetDetailData()
        },
        components: {
            vueJsonEditor
        },
    }
</script>

<style>
    #k8s-daemonset .minizisebtn{
        -webkit-transform: scale(0.6) !important;
    }
    #k8s-daemonset .bg-card {
        background-color: #FAFAFA;
    }
    #k8s-daemonset .el-table__empty-block {
        background-color: #FAFAFA;
        height: 40px;
        font-weight: bold;
    }
</style>